<template>
  <h1>Child</h1>
  <!-- 声明接受props，模板页面直接使用props数据 -->
  <p>{{ num }}</p>
  <button @click="$emit('setNum')">按钮</button>
  <button @click="handleClick">按钮</button>
</template>

<script setup lang="ts">
// 声明接受props
// js环境
// defineProps({
//   num: {
//     type: Number,
//     required: true,
//   },
// });

// ts环境
const props = defineProps<{
  num: number;
}>();
// 在js中使用props数据
console.log(props.num);

// 声明接受自定义事件
// 返回值是触发自定义事件的函数（相当于过去的$emit）
const emit = defineEmits(["setNum"]);

const handleClick = () => {
  emit("setNum");
};
</script>
